  <template>
  <a-modal
    :title="`电话号码`"
    :width="680"
    :visible="visible"
    @ok="
      () => {
        $emit('ok')
      }
    "
    @cancel="
      () => {
        $emit('cancel')
      }
    "
  >
    <a-spin :spinning="loading">
      <ul class="phone-wrap-ul">
        <li v-for="(it, i) in list" :key="it + '' + i">
          <a-badge status="default" :text="it" />
        </li>
      </ul>
    </a-spin>
  </a-modal>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
    }
  },

  components: {},
  props: {
    list: {
      type: Array,
      require: true,
    },
    visible: {
      type: Boolean,
      require: true,
    },
  },
  mounted() {},
  computed: {},
  watch: {
    visible(n) {
      if (n) {
        this.loading = true
        setTimeout(() => {
          this.loading = false
        }, 100)
      }
    },
  },
  methods: {},
  destroyed() {},
}
</script>
<style lang="less">
.phone-wrap-ul {
  display: flex;
  flex-wrap: wrap;
  li {
    margin-right: 10px;
  }
}
</style>





